<template>
  <!--    温度计-->
  <div id="temperature" style="height: 160px; width: 160px; margin: 0 auto;"></div>
</template>

<script>
export default {
  name: "Liquidity",
  props: {
    temp: {
      type: Number
    },
    hum: {
      type: Number
    },
  },
  data() {
    return {
      myChart: this.$echarts.init(document.getElementById('temperature'))
    }
  },
  methods: {
    myEcharts() {
      let that = this
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById('temperature'));
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        // this.myChart.resize()
        that.myChart.resize()
      })
      // 指定图表的配置项和数据
      let option = {
        // 提示框组件
        tooltip: {
          trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          textStyle: {
            color: '#000' // 文字颜色
          },
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
          // 水球图: {a}（系列名称），{b}（无），{c}（数值）
          // 使用函数模板   传入的数据值 -> value: number|Array,
          formatter: function (value) {
            if (value.seriesName === "温度计") {
              return value.seriesName + ': ' + (value.data * 10 * 10) + "℃"
            }
            if (value.seriesName === "湿度计") {
              return value.seriesName + ': ' + (value.data * 10 * 10) + "%rh"
            }
            return value.seriesName + ': ' + (value.data * 10 * 10)
          }
        },
        series: [
          // 温度计
          {
            name: '温度计',
            type: 'liquidFill',
            radius: '76%', // 水球图的半径
            center: ['25%', '50%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
            color: ['#ef1e4d'],    //默认波浪颜色
            // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
            // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
            shape: 'path://m387.961975,275.331543l0,-201.640381c0,-26.077457 -29.678131,-47.191952 -66.098297,-47.191952c-36.540497,0 -66.096878,21.114494 -66.096878,47.191952l0,200.048767c-41.537628,16.264832 -69.770691,47.794006 -69.770691,84.017487c0,52.886108 60.017731,95.744476 134.001755,95.744476c74.043915,0 134.002136,-42.858368 134.002136,-95.744476c0.059937,-35.137268 -26.54776,-65.795593 -66.038025,-82.425873zm-67.903839,162.459808c-61.763824,0 -111.968948,-35.917389 -111.968948,-80.060394c0,-29.20694 22.332703,-56.101624 58.271866,-70.178223l11.437592,-4.457184l0,-209.420731c0,-17.350632 19.804993,-31.44849 44.126526,-31.44849c24.259705,0 44.004669,14.097858 44.004669,31.44849l0,210.6035l10.834686,4.570251c34.614532,14.603241 55.322327,40.326141 55.322327,68.882385c0,44.143005 -50.265381,80.060394 -112.028717,80.060394zm45.509216,-135.371429l-21.670715,-9.119476l0,-137.548523l-44.06485,0l0,136.645508l-22.875549,8.952087c-28.895676,11.345154 -46.89502,32.895447 -46.89502,56.381439c0,35.432648 40.393524,64.284454 89.996918,64.284454c49.602356,0 89.936798,-28.851807 89.936798,-64.284454c0.059906,-22.582886 -16.976563,-43.767334 -44.427582,-55.311035z',
            outline: {
              show: true,
              borderDistance: 0, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 1, // 边框的透明度   默认为 1
                borderWidth: 1, // 边框的宽度
                shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                shadowColor: '#7ad9f6', // 边框的阴影颜色,
                borderColor: '#c6bebe' // 边框颜色
              }
            },
            // 图形上的文本标签
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 400,
              color: '#FFF',
              position: ['50%', '20%'],
              formatter: function (value) {
                return (value.data * 10 * 10) + ''
              }
            },
            data: [this.temp / 100],
          },
          // 湿度计
          {
            name: '湿度计',
            type: 'liquidFill',
            radius: '76%', // 水球图的半径
            center: ['75%', '50%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
            color: ['#4396f1'],    //默认波浪颜色
            // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
            // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
            shape: 'path://m387.961975,275.331543l0,-201.640381c0,-26.077457 -29.678131,-47.191952 -66.098297,-47.191952c-36.540497,0 -66.096878,21.114494 -66.096878,47.191952l0,200.048767c-41.537628,16.264832 -69.770691,47.794006 -69.770691,84.017487c0,52.886108 60.017731,95.744476 134.001755,95.744476c74.043915,0 134.002136,-42.858368 134.002136,-95.744476c0.059937,-35.137268 -26.54776,-65.795593 -66.038025,-82.425873zm-67.903839,162.459808c-61.763824,0 -111.968948,-35.917389 -111.968948,-80.060394c0,-29.20694 22.332703,-56.101624 58.271866,-70.178223l11.437592,-4.457184l0,-209.420731c0,-17.350632 19.804993,-31.44849 44.126526,-31.44849c24.259705,0 44.004669,14.097858 44.004669,31.44849l0,210.6035l10.834686,4.570251c34.614532,14.603241 55.322327,40.326141 55.322327,68.882385c0,44.143005 -50.265381,80.060394 -112.028717,80.060394zm45.509216,-135.371429l-21.670715,-9.119476l0,-137.548523l-44.06485,0l0,136.645508l-22.875549,8.952087c-28.895676,11.345154 -46.89502,32.895447 -46.89502,56.381439c0,35.432648 40.393524,64.284454 89.996918,64.284454c49.602356,0 89.936798,-28.851807 89.936798,-64.284454c0.059906,-22.582886 -16.976563,-43.767334 -44.427582,-55.311035z',
            outline: {
              show: true,
              borderDistance: 0, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 1, // 边框的透明度   默认为 1
                borderWidth: 1, // 边框的宽度
                shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                shadowColor: '#fff', // 边框的阴影颜色,
                borderColor: '#41dcd8' // 边框颜色
              }
            },
            // 图形上的文本标签
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 400,
              color: '#FFF',
              position: ['50%', '20%'],
              formatter: function (value) {
                return (value.data * 10 * 10)
              }
            },
            data: [this.hum / 100],
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    },
  },
  // mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作。
  // 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了
  mounted() {
    this.myEcharts()
  },
  // 监控数据变化
  watch: {
    temp: {
      handler(newVal, oldVal) {
        this.temp = newVal
        console.log(oldVal)
        this.myChart.setOption({
          series: [{
              // 根据名字对应到相应的系列
              name: '温度计',
              data: [this.temp / 100],
            }]
        })
      },
      //深度监听，可监听到对象、数组的变化
      deep: true
    },
    hum: {
      handler(newVal, oldVal) {
        this.hum = newVal
        console.log(oldVal)
        this.myChart.setOption({
          series: [{
              name: '湿度计',
              data: [this.hum / 100],
            }]
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
